<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/boot.js"></script>
    <style>
        #formcontainer {
            background-color: white;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="formcontainer">
            <form class="layui-form layui-form-pane" id="editform" lay-filter="editform">
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">文本框</label>
                            <div class="layui-input-block">
                                <input type="text" name="example_input" autocomplete="off" class="layui-input required">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label required">数字框</label>
                            <div class="layui-input-block">
                                <input type="text" name="example_number" autocomplete="off" class="layui-input required number">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label ">日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="example_date" autocomplete="off" class="layui-input layui-date">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label ">时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="example_time" autocomplete="off" class="layui-input layui-time">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">单选</label>
                            <div class="layui-input-block">
                                <input type="text" name="example_radio" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label ">下拉</label>
                            <div class="layui-input-block">
                                <input type="text" name="example_select" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">切换</label>
                            <div class="layui-input-block">
                                <input type="text" name="example_switch" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label ">多选</label>
                            <div class="layui-input-block">
                                <input type="text" name="example_checkbox" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">单选树</label>
                            <div class="layui-input-block">
                                <input type="text" name="example_singletree" id="example_singletree" autocomplete="off" class="layui-input layui-single-tree"  lay-filter="example_singletree">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">文本域</label>
                            <div class="layui-input-block">
                                <textarea type="text" name="example_texarea" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">富文本</label>
                            <div class="layui-input-block">
                                <textarea id="example_richtext" name="example_richtext" class="layui-richtext"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-xs12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">上传附件</label>
                            <div class="layui-input-block">
                                <boot-upload id="boottest"  grouptype="2020"></boot-upload>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div id="opcontainer">
            <button class="layui-btn" onclick="ChangeFormData()">一键变动</button>
            <button class="layui-btn" onclick="GetFormData()">获取Form数据</button>
            <button class="layui-btn" onclick="DisableFormOp()">表单只读</button>
        </div>
    </div>
</body>
<script>
    var FormDetail = null
    $(function() {
        BindRadio("example_radio", "启用禁用", 20);
        BindSettingSelect("example_select", "性别", 20);
        BindCheckBox("example_checkbox", "定时任务间隔单位", "10");
        BindSwitch("example_switch", "启用禁用", 10);
        BindAttach("boottest");
        BindSelectTree("example_singletree","system/setting/group/tree", { groupTag: "Config" })
        LoadDetail();
    })


    function LoadDetail() {
        FormDetail = {
            "example_input": "文本",
            "example_number": 1000923,
            "example_date": "2022-12-14",
            "example_time": "02:03:03",
            "example_radio": 10,
            "example_select": 10,
            "example_switch": 20,
            "example_checkbox": "20|30",
            "example_singletree":"20220818175246c053f3b5-5af3-4328-882a-6a8ca3183661",
            "example_texarea": "多行文本",
            "example_richtext": "这里是<span style='color: #e03e2d;'><em>edit初始化</em></span>的内容aaaa"
        }
        BindForm("editform", FormDetail);
    }

    function ChangeFormData() {
        FormDetail = {
            "example_input": "文本xxxxxx",
            "example_number": 10086,
            "example_date": "2022-1-1",
            "example_time": "01:01:01",
            "example_radio": 20,
            "example_select": 20,
            "example_switch": 10,
            "example_checkbox": "10",
            "example_singletree":"2022081910124663481f3a-5332-4f17-8fb7-0c70d00b9eec",
            "example_texarea": "多行文本asdasdsssssssssss",
            "example_richtext": "这里是<span style='color: #e03e2d;'><em>edit变动</em></span>的内容aaaa"
        }
        BindForm("editform", FormDetail);
    }

    function GetFormData() {
        var formvalidator = $("#editform").validate();
        if (formvalidator.form()) {
            FormDetail = GetForm("editform");
            if (FormDetail != null) {
                alert(JSON.stringify(FormDetail))
            }
        }

    }

    function DisableFormOp(){
        DisableForm("editform");
    }

    function HandleClose() {
        CloseDialog();
    }
</script>

</html>